<template>
  <div class="Nav-header" :class="{'Black':isNight}">
    <div class="wrapper">
      <el-row type="flex">
        <!--        logo-->
        <el-col :xs="3" :sm="2" :md="2" :lg="4" :xl="5" class="logo-img">
          <div class="logo">
            <a href="/">
              <img src="./../../public/nav-logo.png" alt="">
            </a>
          </div>
        </el-col>
        <el-col :xs="12" :sm="15" :md="15" :lg="username?16:15" :xl="11">
          <div class="nav-contain ">
            <div class="clearfix">
              <ul class="nav-menu">
                <li class="hidden-sm-and-up">
                  <a href="" class="tab">
                    <span class="iconfont hidden-md-only">&#xe661;</span>
                  </a>
                </li>
                <li class="hidden-xs-only">
                  <a href="" class="tab" :class="{active: activeName === '首页' }">
                    <span class="iconfont hidden-md-only">&#xe62f;</span>
                    <span class="hidden-sm-and-down">发现</span>
                  </a>
                </li>
                <li v-show="!username" class="hidden-xs-only">
                  <a href="" class="tab">
                    <span class="iconfont hidden-md-only">&#xe666;</span>
                    <span class="hidden-sm-and-down">下载APP</span>
                  </a>
                </li>
                <li class="hidden-sm-and-down" v-show="username">
                  <a href="" class="tab">
                    <span class="iconfont hidden-md-only">&#xe630;</span>
                    <span>关注</span>
                  </a>
                </li>
                <li class="hidden-sm-and-down" v-show="username" @click="gotoOther('message')">
                  <a class="tab message" :class="{active: activeName === '消息' }">
                    <span class="iconfont hidden-md-only">&#xe6bf;</span>
                    <span>消息</span>
                    <ul class="message-children">
                      <li @click.stop="gotoOther('message')">
                        <span class="iconfont">&#xe660;</span>
                        <span class="info">评论</span>
                      </li>
                      <li @click.stop="gotoOther('letter')">
                          <span class="iconfont">&#xe668;</span>
                          <span class="info">简信</span>
                      </li>
                      <li @click.stop="gotoOther('apply')">
                        <span class="iconfont">&#xe667;</span>
                        <span class="info">投稿申请</span>
                      </li>
                      <li @click.stop="gotoOther('like')">
                        <span class="iconfont">&#xe604;</span>
                        <span class="info">喜欢和赞</span>
                      </li>
                      <li @click.stop="gotoOther('follow')">
                        <span class="iconfont">&#xe719;</span>
                        <span class="info">关注</span>
                      </li>
                      <li @click.stop="gotoOther('pay')">
                        <span class="iconfont">&#xe625;</span>
                        <span class="info">赞赏和付费</span>
                      </li>
                      <li @click.stop="gotoOther('other')">
                        <span class="iconfont">&#xe60b;</span>
                        <span class="info">其他提醒</span>
                      </li>
                    </ul>
                  </a>
                </li>
                <li class="search hidden-xs-only">
                  <input type="text" :model="searchInfo" placeholder="搜索">
                  <span class="iconfont">&#xe649;</span>
                </li>
              </ul>
            </div>
            <div class="nav-other">
              <div class="Aa">
                <span class="iconfont">&#xe655;</span>
                <div class="Aa-children" :class="{'Black':isNight}">
                  <div class="meta">
                    <span class="iconfont">&#xe63d;</span>
                    <span>夜间模式</span>
                  </div>
                  <div class="color-btn">
                    <button @click="isNight=true" :class="{'active':isNight}">开</button>
                    <button :class="{'active':!isNight}" @click="isNight=false">关</button>
                  </div>
                </div>
              </div>
              <div class="diamond">
                <img src="./../../public/diamond.png" alt="">
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="9" :sm="7" :md="7" :lg="username?4:5" :xl="username?4:6" class="nav-user">
          <div class="user" v-show="username">
            <div class="user-img">
              <a href="/#/User/admin">
                <img src="./../../public/user.jpg" alt="">
              </a>
            </div>
            <div class="children">
              <ul>
                <li @click="gotoUser">
                  <span class="iconfont">&#xe603;</span>
                  <span class="info">我的主页</span>
                </li>
                <li @click="gotoBookmarks">
                  <span class="iconfont" >&#xe669;</span>
                  <span class="info">我的喜欢</span>
                </li>
                <li>
                  <span class="iconfont">&#xe660;</span>
                  <span class="info">帮助和反馈</span>
                </li>
                <li>
                  <span class="iconfont">&#xe611;</span>
                  <span class="info">设置</span>
                </li>
                <li @click="logout">
                  <span class="iconfont">&#xe7fd;</span>
                  <span class="info">退出</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="login-button" v-show="!username">
            <a href="/#/Login">
              <button>登陆</button>
            </a>
          </div>
          <div class="register" v-show="!username">
            <button>注册</button>
          </div>
          <div class="user-write">
            <button>
              <span class="iconfont">&#xe602;</span>
              写笔记
            </button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'Navheader',
  data () {
    return {
      searchInfo: '',
      isNight: false
    }
  },
  props: {
    activeName: {
      type: String,
      default: '首页'
    }
  },
  computed: { // 计算属性
    ...mapState(['username'])
  },
  mounted () { // 挂载
  },
  methods: { // 方法
    gotoOther (to) {
      if (this.$route.params.msg !== to) {
        this.$router.push('/message/' + to)
      }
    },
    gotoBookmarks () {
      this.$router.push('/bookmarks')
    },
    gotoUser () {
      this.$router.push('/User/1')
    },
    logout () {
      this.$cookie.set('admin', '', { expires: '-1' })
      this.$store.dispatch('saveUserName', '')
    }
  }
}
</script>

<style lang="scss">
  @import "./../assets/scss/config";
  @import "./../assets/scss/mixin";

  .Nav-header {
    background-color: $colorWhite;
    border-bottom: 1px solid #cccccc;
    &.Black {
      background-color: $colorBlack;
      color: $colorWhite;
    }
    .wrapper {
      min-width: 768px;
      margin: 0 auto;
      max-width: 1440px;
      color: $colorBlack;
      .logo-img {
        .logo {
          width: 100px;
          height: 56px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .nav-contain {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .nav-menu {
          display: flex;
          align-items: center;

          .hidden-sm-and-up {
            .tab {
              padding: 8px;
              border-radius: 5px;
              border: 1px solid #cccccc;

              &:hover {
                background: none;
              }
            }

            .iconfont {
              color: #ddd;
              margin-right: 0 !important;
            }
          }

          li {
            position: relative;
            box-sizing: border-box;
            float: left;
            margin-right: 10px;
            a {
              color: $colorBlack;
              padding: 17px;

              &:hover {
                background-color: #eeeeee;
              }
            }
            .message {
              &:hover {
                .message-children {
                  li {
                    display: block;
                  }
                }
              }
            }

            .tab {
              font-size: 17px;
              line-height: 25px;
              span {
                font-size: 17px;
              }

              .iconfont {
                margin-right: 5px;
                font-size: 20px;
                vertical-align: middle;
              }

              &.active {
                color: #ea6f5a !important;
              }

              .message-children {
                position: absolute;
                top: 40px;
                z-index: 2000;
                left: 0;
                box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
                li {
                  display: none;
                  margin-right: 0;
                  padding: 10px 20px;
                  height: 50px;
                  line-height: 30px;
                  width: 200px;
                  background-color: #fff;
                  &:hover {
                    background-color: #f5f5f5;
                  }

                  .iconfont {
                    margin-right: 15px;
                    font-size: 22px;
                    color: #ea6f5a;
                  }

                  .info {
                    font-size: 15px;
                    color: #333333;
                  }
                }
              }
            }

            &.search {
              width: 250px;

              input {
                height: 38px;
                font-size: 14px;
                border: 1px solid #eee;
                border-radius: 40px;
                background: #eee;
                padding: 0 40px 0 20px;
                outline: none;
              }

              .iconfont {
                font-size: 17px;
                cursor: pointer;
              }

              span {
                position: absolute;
                right: 30px;
                top: 12px;
                color: #969696;
              }

              &:hover {
                background: none;
              }
            }
          }
        }

        .nav-other {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .diamond, .Aa {
            margin: 0 10px;
            padding: 15px 0;
            cursor: pointer;
          }

          .diamond {
            width: 57px;
            height: 25px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .Aa {
            position: relative;

            .iconfont {
              font-size: 25px;
              color: #969696;
            }

            .Aa-children {
              display: none;
              position: absolute;
              z-index: 1000;
              background-color: #fff;
              top: 57px;
              width: 200px;
              left: -150px;
              border-radius: 4px;
              padding: 20px 20px 20px 24px;
              height: 100px;
              border: 1px solid #cccccc;
              cursor: default;
              box-shadow: 0 2px 8px rgba(0, 0, 0, .1);

              div {
                display: inline-block;
              }

              .meta {
                margin-right: 15px;
              }

              .color-btn {
                .active {
                  background-color: #6dacf4;
                  color: #fff;
                }

                button {
                  padding: 10px 13px 10px 17px;
                  background-color: #fff;
                  outline: none;
                  border: 1px solid #cccccc;
                  color: #969696;
                  text-align: center;

                  &:first-child {
                    border-radius: 20px 0 0 20px;
                  }

                  &:last-child {
                    border-radius: 0 20px 20px 0;
                    border-left: 0;
                  }
                }
              }
            }

            &:hover {
              .Aa-children {
                display: block;
              }
            }
          }
        }
      }

      .nav-user {
        display: flex;
        align-items: center;
        justify-content: space-evenly;;

        button {
          cursor: pointer;
          width: 80px;
          height: 38px;
          border-radius: 20px;
          font-size: 15px;
          color: #ea6f5a;
          border: 1px solid #ea6f5a;
          background-color: #fff;
          outline: none;
        }

        .user {
          position: relative;
          display: flex;
          height: 56px;
          width: 70px;
          align-items: center;
          // 伪类使用
          &:after {
            content: '\e644';
            font-family: 'iconfont';
            color: #cccccc;
            font-size: 20px;
            position: absolute;
            top: 18px;
            right: -3px;
          }

          &:hover {
            background-color: #f5f5f5;
            .children {
              display: block;
            }
          }

          .user-img {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .children {
            position: absolute;
            top: 56px;
            left: 0;
            display: none;
            width: 158px;
            z-index: 1000;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
            li {
              margin-right: 0;
              padding: 10px 20px;
              height: 50px;
              cursor: pointer;
              line-height: 50px;
              &:hover {
                background-color: #f5f5f5;
              }
              .iconfont {
                margin-right: 10px;
                font-size: 22px;
                color: #ea6f5a;
              }
              .info {
                font-size: 15px;
              }
            }
          }
        }

        .user-write {
          button {
            width: 100px;
            color: white;
            background-color: #ea6f5a;

            .iconfont {
              color: white;
            }
          }
        }
      }
    }
  }
</style>
